import { useDispatch, useSelector } from 'react-redux'
import './PayOrder.scss'
import type { AppDispatch, RootState } from '../../../store'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useMemo } from 'react'
import { CheckOutline, CloseOutline, RightOutline } from 'antd-mobile-icons'
import { Button, Image, Switch, Toast } from 'antd-mobile'

import { clearShopCartItem } from '../../../store/modules/cart'
import { addOrderSubTableware, clearOrderSubmit, submitOrder } from '../../../store/modules/orderSubmit'
import type { addOrderParams } from '../../../api/order'
import { OrderList } from '../../../components/orderList'
import { getShopsInfo } from '../../../store/modules/shops'


const PayOrder = () => {
    // const location = useLocation()
    // const searchParams = new URLSearchParams(location.search)
    const [searchParams] = useSearchParams()
    const shops_id = searchParams.get('shops_id') || ''
    // const cartList = useSelector((state: RootState) => {
    //     return (state.cart.cartShop || {})[shops_id] || []
    // })
    const dispatch = useDispatch<AppDispatch>()
    const navigate = useNavigate()
    if (!shops_id) {
        Toast.show({ content: '商品id不存在' })
        navigate(-1)
    }
    const { shopInfo, addressItem, remark, tableware, orderList } = useSelector((state: RootState) => {
        return state.orderSubmit
    })
    const cartCount = useMemo(() => {
        if (!shopInfo || !orderList) {
            return -1
        }
        return orderList.reduce((item, total) => { return item + total.count * total.discount_price }, 0) + shopInfo.delivery_fee
    }, [orderList, shopInfo])

    if (!shopInfo) {
        dispatch(getShopsInfo())
    }

    const navRemark = () => {
        navigate('/remark')
    }

    const count = useMemo(() => {
        if (!orderList) {
            return -1
        }
        return orderList.reduce((item, total) => {
            return item + total.count
        }, 0)
    }, [orderList])


    const subOrder = () => {

        const data: addOrderParams = {
            orderItemList: orderList,
            shops_id,
            shops_title: shopInfo?.title,
            address_id: addressItem?._id,
            total_fee: cartCount,
            status: 1,
            tableware,
            remark,
            count
        }
        dispatch(submitOrder(data))


        return
        if (addressItem) {
            Toast.show({
                content: '提交成功'
            })
            dispatch(clearShopCartItem({ shops_id }))
            dispatch(clearOrderSubmit())
            navigate('/home')
        } else {
            Toast.show({
                content: "请选择地址"
            })
        }
    }
    const switchChange = (e: boolean) => {
        console.log(e)

        dispatch(addOrderSubTableware(e))
    }
    if (!shopInfo || !orderList) {
        Toast.show({ content: '信息错误，请重试' })
        setTimeout(() => {
            navigate('/home')
        }, 1000);

        return
    }
    return <div className='payorder'>
        {addressItem ? <div className='addressInfo' onClick={() => navigate('/address')}>
            <div className='address_icon'>
                <div>
                    <div className='name_phone'>
                        <div>{addressItem.name}</div>
                        <div>{addressItem.mobile}</div>
                    </div>
                    <div className=''>{addressItem.address}</div>
                </div>
                <RightOutline fontSize={18} color='var(--adm-color-primary)' />

            </div>
            <div className='delivery'>
                <div>平台配送</div>
                <div>预计<span>{shopInfo.delivery_time}</span>送达</div>
            </div>

        </div>
            : <div className='isAddress' onClick={() => navigate('/address')}>请选择地址<RightOutline fontSize={18} /></div>
        }

        <OrderList orderList={orderList} shopInfo={shopInfo} isShowRight={false} />

        <div className='remark'>
            <div className='shopRemark'>
                <span className='bold'>商家承诺</span>
                <span>售后无忧-食无忧</span>
            </div>
            <div className='shopRemark'>
                <span className='bold'>隐私保护</span>
                <span>号码保护-隐私无忧</span>
            </div>

            <div className='tableware'>
                <div className='bold'>是否需要餐具</div>
                <Switch defaultChecked={tableware} onChange={switchChange}
                    checkedText={<CheckOutline fontSize={15} />}
                    uncheckedText={<CloseOutline fontSize={15} />}
                />
            </div>
            <div className='ipt' onClick={navRemark}>
                <div style={{ fontWeight: 'bold' }}>备注</div>
                {
                    <div>{remark}<RightOutline fontSize={14} /></div>
                }
            </div>




        </div>
        <div className='submit'>
            <div><Button onClick={subOrder} className='btn' color='primary' size='middle'>提交订单</Button></div>
        </div>
    </div>
}

export { PayOrder }